<template>
	<div :class="[ { 'defaultUl' : show }, 'travel-menus','swiper' ]">
		<ul class="swiper-wrapper">
			<li class="swiper-slide" v-for="item in menus" :key='item.type' @click="btn(item.type)">
				<img src="../../../../public/img/TravelClick.png" v-if="item.type == id">
				{{item.typeName}}
			</li>
		</ul>
	</div>
</template>

<script>
	
	import Swiper, {
		EffectCoverflow,
		EffectCube,
	} from 'swiper';
	
	//3.说明swiper组件应用配置
	Swiper.use([ EffectCoverflow, EffectCube]);
	
	export default{
		name:'TravelMenus',
		data(){
			return{
				menus:[],
				swiperList:'',
				show:false,
				newList : [],
				// 用来判断是否选中，选中则上样图
				id : 0,
			}
		},
		// 组件创建之后发起异步请求
		created(){
			this.getMenus();
			this.btn();
		},
		mounted(){
			// 整个网页发起监听滚动事件操作( '事件' , 触发事件后调用的函数 )
			// 限制触发函数的时间：每隔20毫秒-15毫秒执行一次滚动事件函数
			// window.addEventListener( 'scroll' ,this.fiexMenus )
			let timer;
			let flag = true; // 判断是否打开滚动监听的函数
			window.addEventListener('scroll' , ()=>{
				// 设置定时器
				if( flag ){
					this.fiexMenus();
				}
				// 关闭开关
				flag = false
				
				//清除定时器
				clearTimeout(timer);
				
				//设置定时器，每隔15毫秒，打开一次开关
				timer = setTimeout( ()=>{ flag = true } , 15 );
				
			} , true)
		},
		//方法
		methods:{
			// 当滚动事件被触发时间调用的函数
			fiexMenus(){
				// 当前区域距离窗口左上角的纵向坐标
				// console.log( window.pageYOffset );
				// 当前滚动条的纵向坐标
				// console.log( document.documentElement.scrollTop )
				let sTop = window.pageYOffset || document.documentElement.scrollTop;
				let windowHeight = document.clientHeight || document.body.clientHeight;
				let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
				// let scrollHeight = document.scrollHeight || document.body.scrollHeight;
				// console.log('可视窗体高度:'+windowHeight);
				// console.log('距离顶部:'+sTop);
				// console.log('距离底部:'+scrollHeight);
				// console.log( document.scrollHeight , document.body.scrollHeight );
				sTop >= 2350 ? (this.show = true) : (this.show=false);
				
				/* 下滑更新： 1.获取当前滚动条的位置以及当前网页的高度 + 设备高度； 2.监听滚动事件：高度的获取，以及如果滚动条到达底部，发起一个新的异步请求 */
			
				/*
					1.监听滚动事件：获取高度、判断高度是否到达底部 ===>	调用异步请求函数
					2.异步函数内：默认发起第一页的请求page=1，页码就需要自增+1；当滚动事件发生并且达到底部，发起page的请求数据
					3.整理获取数据
				*/
			},
			getMenus(){
				this.axios.get('https://m.youxiake.com/api/m/index/part?uid=&sitecode=1&city_id=1&refreshCount=27').then( (res)=>{
					res.data.data.flowTabList.forEach( (item , i)=>{
						let obj={
							type : item.type,
							typeName : item.typeName
						};
						this.menus.push( obj )
					} )
					// 调用滑动函数
					this.MenusSwiper();
					
				} ).catch( (error)=>{
					console.log( error )
				} )
			},
			//滑动
			MenusSwiper(){
				// 开始点击之后，动态设置swiper的属性【swiper对象.params.属性名 = 值】
				this.swiperList = new Swiper('.travel-menus' , {
					slidesPerView:6.5,
					centeredSlides:true,
					centeredSlidesBounds:true,
					slideToClickedSlide:true
				})
			},
			// 必须要循环
			getImg( imgurl ){
				if( imgurl != ''){
					// 去掉http://和https://
					let url = imgurl.substring( 8 );
					return 'https://images.weserv.nl?url='+url;
				}
			},
			btn(val){
				if( val == null ){
					val = 1;
					this.id = 0;
				}
				this.id = val;
				let that = this;
				this.axios.get( 'https://m.youxiake.com/api/m/index/flow/recommend?sitecode=7&city_id=7&type='+val+'&page=1' ).then( (res)=>{
					that.newList = res.data.data.list;
					this.$emit( 'show' , that.newList );
					// console.log(that.newList);
				} ).catch( (error)=>{
					console.log(error);
				} )
				that.newList = [];
			}
		}
	}
</script>
<style scoped>
	.travel-menus{
		height: 0.8rem;
		background-color: orange;
	}
	.travel-menus ul{
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
	}
	.travel-menus ul li{
		width: 1.5rem;
		background-color: white;
		text-align: center;
		height: 0.8rem;
		line-height: 0.8rem;
		font-weight: bold;
		font-size: 20px;
		position: relative;
		z-index: 2;
		/*padding-left: 0.4rem;
		padding-right: 0.4rem; */
	}
	/* 默认选择器 */
	.defaultUl{
	    position: fixed !important;
	    left: 0;
	    top: 0;
		right: 0;
	    z-index: 100
	}
	.travel-menus ul li img{
		width: 1.2rem;
		position: absolute;
		/* top: 0.01rem; */
		/* left: 0.2rem; */
		right: 0.2rem;
		z-index: 1;
	}
</style>
